import React from 'react';
import ReactDOM from 'react-dom';
import {Router, hashHistory, Route, IndexRoute} from 'react-router';
import {createStore, applyMiddleware, compose } from 'redux'
import {Provider} from 'react-redux';
import {routerMiddleware, syncHistoryWithStore} from 'react-router-redux';
import thunk from 'redux-thunk';
import reducers from './reducers'
import './index.css'

import {App,Welcome,Work,DayPickerDemo,TableDemo} from './modules';

const middleware = routerMiddleware(hashHistory);
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers,
  composeEnhancers(applyMiddleware(thunk,middleware)));

const history = syncHistoryWithStore(hashHistory, store);

// const App = React.createClass({
//   render(){
//     console.log(this.props);
//     return(
//       <div>
//         <h1>App</h1>
//         <div>
//         {this.props.children}
//         </div>
//       </div>
//     )
//   }
// })

ReactDOM.render(
    <Provider store={store}>
      <Router history={history}>
        <Route path='/' component={App}>
          <IndexRoute component={TableDemo}/>
          <Route path='work' component={Work}/>
        </Route>
      </Router>
    </Provider>,
  document.getElementById('root')
);